<!--
 *                        .::::.
 *                      .::::::::.
 *                     :::::::::::
 *                  ..:::::::::::'
 *               '::::::::::::'
 *                 .::::::::::
 *            '::::::::::::::..
 *                 ..::::::::::::.
 *               ``::::::::::::::::
 *                ::::``:::::::::'        .:::.
 *               ::::'   ':::::'       .::::::::.
 *             .::::'      ::::     .:::::::'::::.
 *            .:::'       :::::  .:::::::::' ':::::.
 *           .::'        :::::.:::::::::'      ':::::.
 *          .::'         ::::::::::::::'         ``::::.
 *      ...:::           ::::::::::::'              ``::.
 *     ````':.          ':::::::::'                  ::::..
 *                        '.:::::'                    ':'````..
 -->


<template>
  <div style="padding: 10px">
    <div style="margin-bottom: 50px">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="防抖节流">
          <el-input v-model="form.name" @change="inputChange()"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div
      style="display: flex; justify-content: space-between; align-items: center"
    >
      <div>
        <el-radio-group v-model="fromLan">
          <el-radio
            v-for="item in radioData"
            :key="`from${item.key}`"
            :label="item.key"
            >{{ item.value }}</el-radio
          >
        </el-radio-group>
      </div>
      <img
        src="../assets/imgs/picture.jpg"
        alt=""
        style="width: 50px; height: 52px"
      />
      <div>
        <el-radio-group v-model="toLan">
          <el-radio
            v-for="item in radioData"
            :key="`from${item.key}`"
            :label="item.key"
            >{{ item.value }}</el-radio
          >
        </el-radio-group>
      </div>
    </div>
    <div style="margin-top: 100px">
      <p>
        1、insIn8文件夹，准备好zh文件，zh文件是一个存放要翻译的文件。for
        Expample：
      </p>
      <p style="text-indent: 2em">export default{</p>
      <p style="text-indent: 6em">menu_145: '数据字典',</p>
      <p style="text-indent: 6em">menu_146: '配置查询',</p>
      <p style="text-indent: 6em">menu_147: '批量重启',</p>
      <p style="text-indent: 2em">}</p>
      <p>2、点击批量翻译，导出一个已经被翻译好的文件。可直接使用</p>
    </div>
    <div style="margin-top: 30px">
      <a-form
        :form="form"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 12 }"
        @submit="handleSubmit"
      >
        <a-form-item
          label="Notesajalsanajkllhankkaakaknaksanajkllhankkaakaknaksanajkllhankkaakaknaka"
        >
          <a-input
            v-decorator="[
              'note',
              {
                rules: [{ required: true, message: 'Please input your note!' }],
              },
            ]"
          />
        </a-form-item>
      </a-form>
      <div style="margin-top: 300px">
        <el-button type="primary" @click="submit(exchange)">批量翻译</el-button>
        <el-button type="primary" @click="submit2">差缺补漏</el-button>
        <el-button type="primary" @click="submit3(en, exchange)"
          >en.js按照zh.js排序</el-button
        >
      </div>

    </div>
  </div>
</template>

<script>
import { saveAs } from 'file-saver'
import exchange from '../insIn8/zh'
import en from '../insIn8/en'
import md5 from '../utils/md5'
import { filterNullMiss, transform } from '../utils/index'

export default {
    name: 't6',
    data() {
        return {
            form: {
                name: '',
            },
            fromLan: 'zh',
            toLan: 'en',
            radioData: [
                { key: 'zh', value: '中文' },
                { key: 'en', value: '英语' },
                { key: 'yue', value: '粤语' },
                { key: 'wyw', value: '文言文' },
                { key: 'jp', value: '日语' },
                { key: 'kor', value: '韩语' },
                { key: 'fra', value: '法语' },
                { key: 'spa', value: '西班牙语' },
                { key: 'th', value: '泰语' },
                { key: 'ara', value: '阿拉伯语' },
                { key: 'ru', value: '俄语' },
                { key: 'pt', value: '葡萄牙语' },
                { key: 'de', value: '德语' },
                { key: 'it', value: '意大利语' },
                { key: 'el', value: '希腊语' },
                { key: 'nl', value: '荷兰语' },
                { key: 'pl', value: '波兰语' },
                { key: 'bul', value: '保加利亚语' },
                { key: 'est', value: '爱沙尼亚语' },
                { key: 'dan', value: '丹麦语' },
                { key: 'fin', value: '芬兰语' },
                { key: 'cs', value: '捷克语' },
                { key: 'rom', value: '罗马尼亚语' },
                { key: 'slo', value: '斯洛文尼亚语' },
                { key: 'swe', value: '瑞典语' },
                { key: 'hu', value: '匈牙利语' },
                { key: 'cht', value: '繁体中文' },
                { key: 'vie', value: '越南语' },
            ],
        }
    },
    computed: {},
    watch: {},
    mounted() {},
    methods: {
        open() {},
        // 测试防抖和节流
        inputChange() {
            console.log(this.form.name)
        },
        //
        testAxios() {
            return new Promise((resolve, reject) => {
                this.axios
                .get('')
                .then((res) => {
                    resolve(res.tokenId)
                })
                .catch((err) => {
                    console.log(err)
                })
            })
        },
        async testAxios2() {
            let tokenId = await this.testAxios()
            return new Promise((resolve, reject) => {
                this.axios.get('?tokenId=tokenId').then((res) => {
                    resolve(res.tokenId)
                })
            })
        },
        submit(o) {
            let obj
            if (o) {
                obj = o
            } else {
                obj = JSON.parse(JSON.stringify(exchange))
            }
            let appid = '20221117001457783'
            let appkey = 'Oo9OP0pjZqhf2pzQxcvy'
            let arr = []
            let count = 0
            Object.keys(obj).forEach((item) => {
                arr.push(
                    new Promise((resolve, reject) => {
                        let rand = new Date().getTime()
                        let sin = md5.MD5(appid + obj[item] + rand + appkey)
                        this.axios
                        .get(
                            `/api/trans/vip/translate?q=${obj[item]}&
                    from=${this.fromLan}&to=${this.toLan}&appid=${appid}&salt=${rand}&sign=${sin}`
                        )
                        .then((res) => {
                            // obj[item] = res.data.trans_result[0].dst
                            let newObj = { key: item, res, success: true }
                            resolve(newObj)
                        })
                        .catch((err) => {
                            let erObj = { key: item, err, success: false }
                            resolve(erObj)
                        })
                    })
                )
            })
            count = arr.length
            let pageCount = 100
            const Num = Math.ceil(count / pageCount)
            this.$message.info(
                `总共需要生成${Num}个文件，请使用下载的第${Num}个文件，多余的文件请手动删除`
            )
            for (let i = 0; i < Num; i++) {
                Promise.all(arr.slice(pageCount * i, pageCount * (i + 1))).then(
                    (res) => {
                        for (let i = 0; i < res.length; i++) {
                            if (res[i].success) {
                                obj[res[i].key] = res[i].res
                  && res[i].res.data
                  && res[i].res.data.trans_result
                  && res[i].res.data.trans_result[0]
                  && res[i].res.data.trans_result[0].dst
                            } else {
                                obj[res[i].key] = ''
                            }
                        }
                        let content = JSON.stringify(obj)
                        let blob = new Blob([content], {
                            type: 'text/plain;charset=utf-8',
                        })
                        saveAs(blob, 'en.js')
                    }
                )
            }
            // let arrtest = []
            // arrtest.push(new Promise((resolve, reject) => {
            //     console.log('我')
            //     resolve('爱')
            // })
            // .then((res) => {
            //     console.log(res)
            // }))
            // Promise.all(arrtest).then((res) => {
            //     console.log(res)
            //     o.name = res
            // })
            // setTimeout(() => {
            //     console.log(obj.search)
            //     let content = JSON.stringify(obj)
            //     let blob = new Blob([content], { type: 'text/plain;charset=utf-8' })
            //     saveAs(blob, 'en.js')
            // }, 1000)
        },
        submit2() {
            const obj = filterNullMiss(en, exchange)
            this.submit(obj)
        },
        submit3() {
            const sortObj = transform(en, exchange)
            let content = JSON.stringify(sortObj)
            let blob = new Blob([content], { type: 'text/plain;charset=utf-8' })
            saveAs(blob, `${this.toLan}.js`)
        },
    },
}
</script>

<style>
.ant-form-item-label {
  display: flex;
  justify-content: flex-end;
  /* line-height: 40px; */
  /* //这个数值视具体情况而定 */
}

.ant-form-item-label label {
  /* //这是关键 */
  white-space: normal;
  text-align: right;
  color: #8a8a8a;
  /* padding-right: 32px; */
}

/* .ant-form-item-label label:after{ */
/* content: none !important; */
/* //解决上面的样式label后面会有空格 */
/* } */
</style>